import React, { Component } from 'react';
import { WeaPopoverHrm } from 'ecCom';
import StaticDepartment from './StaticDepartment';

export default class StaticCollapse extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = 'emial-static-collapse';
    this.isInstanceMounted = false;
    this.id = `emailStaticCollapse_${Math.random().toString(36).substr(2, 6)}`;
    this.state = {
      collapsed: props.collapsed || true,
      height: 30,
    };
  }

  componentDidMount() {
    this.isInstanceMounted = true;
    const height = this.getContentHeight();
    /* eslint-disable */
    this.setState({ height });
    $(window).resize(() => {
      this.isInstanceMounted &&
        this.setState({ height: this.getContentHeight() });
    });
    /* eslint-enable */
  }

  componentWillReceiveProps(nextProps) {
    const { collapsed: _collapsed } = this.props;
    const { collapsed } = nextProps;
    collapsed !== _collapsed && this.setState({ collapsed });
  }

  componentDidUpdate() {
    const height = this.getContentHeight();
    if (this.state.height !== height) {
      /* eslint-disable */
      this.setState({ height });
      /* eslint-enable */
    }
  }

  componentWillUnmount() {
    $(window).off('resize');
    this.isInstanceMounted = false;
  }

  getContentHeight() {
    const content = $(`#${this.id} .${this.prefixCls}-content`);
    let height = 30;
    if (content && content.length > 0) {
      height = content.height();
    }
    return height;
  }

  hide = () => {
    const { datas = [] } = this.props;
    datas.forEach((d, i) => {
      this.refs[`department${i}`] && this.refs[`department${i}`].hide();
    });
  };

  render() {
    const { datas = [], isInternal } = this.props;
    const { collapsed, height } = this.state;
    const renderName = (data) => {
      if (isInternal) {
        return [
          <WeaPopoverHrm
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaPopoverHrm@rt4dub@${data.typeValue}`}
          />,
          <a
            className="isInternal"
            href={`javaScript:openhrm(${data.typeValue || ''});`}
            onClick={e => window.pointerXY(e)}
          >
            {data.showName}
          </a>,
        ];
      }
      return <a title={data.showName}>{data.showName}</a>;
    };
    return (
      <div
        id={this.id}
        className={this.prefixCls}
        style={height > 30 ? { paddingRight: 33 } : null}
      >
        {height > 30 && (
          <i
            className={`icon-coms-${collapsed ? 'down2' : 'up2'}`}
            onClick={() => this.setState({ collapsed: !collapsed })}
          />
        )}
        <div
          className={`${this.prefixCls}-content-wrap`}
          style={{ height: collapsed ? 20 : height }}
        >
          <div className={`${this.prefixCls}-content`}>
            {datas.map((d, index) => (
              <span
                className={`${this.prefixCls}-content-tag`}
                key={`account${index}`}
              >
                {
                  /** 所有人/部门/分部,不应该能打开用户卡片 */
                  (d.type === 'resource' && d.typeValue !== '1') ||
                  d.type === undefined ? (
                    renderName(d)
                  ) : d.users && d.users.length > 0 ? (
                    <StaticDepartment
                      ecId={`${
                        (this && this.props && this.props.ecId) || ''
                      }_StaticDepartment@paiuxl@department${index}`}
                      ref={`department${index}`}
                      data={d}
                    >
                      <a>{d.showName}</a>
                    </StaticDepartment>
                  ) : (
                    <a title={d.showName}>{d.showName}</a>
                  )
                }
              </span>
            ))}
          </div>
        </div>
      </div>
    );
  }
}
